<template>
  <div class="CollectionStores-container">
    <!-- 头部导航栏 -->
    <my-header :title="index === 0? '收藏店铺(个人商圈)':'进店记录'" @onClickLeft="$router.push('/my')"/>
    <!-- 搜索框 -->
    <div class="CollectionBox">
      <div class="search-box">
        <van-icon name="search" />
        <span class="SearchStores">搜索店铺</span>
      </div>
      <!-- tab栏 -->
      <van-grid  class="vanGridBox" direction="horizontal" clickable  >
        <van-grid-item text="城市">
          <van-icon name="map-marked" slot="icon"/>
        </van-grid-item>
        <van-grid-item icon="photo-o" text="距离" >
          <van-icon name="sort" slot="icon"/>
        </van-grid-item>
        <van-grid-item text="活动" >
          <van-icon name="new-arrival" slot="icon"/>
        </van-grid-item>
        <van-grid-item icon="photo-o" text="行业" >
          <van-icon name="wap-nav" slot="icon"/>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 店铺信息 -->
    <div class="EachStoresBox">
    <div class="EachStores" v-for="(item, i) in myCollection" :key="i">
        <store-info :storesName="item.name" :storesNumber="item.doorNumber" :storesDistance="+item.money" :StoreAddress="item.address">
          <div slot="right" class="rightSlot" :style="{color:item.Collection? 'orange':'blue'}" @click="changeCollection(i)">
                <van-icon :name="item.Collection? 'star':'star-o'"/>
                <span>{{item.Collection? '取消收藏':'收藏店铺'}}</span>
            </div>
        </store-info>
    </div>
    </div>
  </div>
</template>

<script>
import MyHeader from '../components/my-header.vue'
import StoreInfo from '../components/store-info.vue'
import { mapState, mapMutations } from 'vuex'
import { address } from '@/api/address.js'
export default {
  name: 'CollectionStoresIndex',
  components: {
    MyHeader,
    StoreInfo
  },
  props: {
    storesAvatar: {
      type: String
    }
  },
  data () {
    return {

    }
  },
  computed: {
    ...mapState('m_my', ['myCollection', 'index'])
  },
  watch: {},
  created () {
    this.getStoresInfo()
  },
  mounted () {

  },
  methods: {
    ...mapMutations('m_my', ['saveMyCollection', 'changeCollectionStatic']),
    // 获取店铺信息
    async getStoresInfo () {
      try {
        const { data: res } = await address()
        var StoresInfoList = []
        res.forEach((item) => {
          StoresInfoList.push(...item.Store)
        })
        this.saveMyCollection(StoresInfoList)
        // console.log(StoresInfoList)
      } catch (error) {
        // console.log(error)
        this.$toast.fail('获取店铺信息失败！')
      }
    },
    changeCollection (i) {
      // console.log(i)
      // console.log(this.myCollection)
      this.changeCollectionStatic(i)
    }
  }
}
</script>

<style scoped lang="less">
.rightSlot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  span {
      font-size: 25px;
      margin-top: 10px;
    }
    .van-icon {
      color: #ff8a01;
      font-size: 60px;
    }
}
/deep/.search-box {
  width: 90%;
  height: 80px;
  background-color: #fff;
  border-radius: 40px;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 15px;
  color: #c8c8c8;
  border: 1px solid blue;
  .SearchStores {
    font-size: 35px;
    margin-left: 10px;
    margin-bottom: 3px;
  }
}
.CollectionStores-container {
  .van-grid {
    position: relative;
    border: 1px solid black;
    .van-grid-item {
      border-right: 4px solid black;
    }
    .van-grid-item:last-child {
      border-right: 0;
    }
    /deep/.van-grid-item__text {
      font-size: 35px;
    }
    .van-icon {
      position: absolute;
      right: -116px;
      top: -20px;
      font-size: 38px;
    }
  }
  .CollectionBox {
    z-index: 80;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 80px
}
}
/deep/.vanGridBox  {
  border-radius: 2px solid #f00000;
}
/deep/.van-hairline--top {
      margin: 0 8px;
    }
.EachStoresBox {
  margin-top: 240px;
}
/deep/ .CollectionStores-container .van-grid .van-grid-item[data-v-fa29feca] {
  border-right: 5px solid red;
}
.CollectionStores-container .van-grid[data-v-fa29feca] {
  border: 5px solid #02b6fd
}
</style>
